<template>
	<view class="container padding-top-sm">
		<view
			class="margin-left-sm margin-right-sm text-13 bg-white padding-left-sm padding-right-sm padding-top padding-bottom">
			<view class="text-15 text-181818 text-bold">
				基本信息
			</view>
			<view class="flex justify-start align-center margin-top">
				<view class="text-999">
					姓名
				</view>
				<view class="margin-left">
					{{detailUser.userName}}
				</view>
				<view class="color margin-left" v-if='detailUser.level==1'>
					初级技工
				</view>
				<view class="color margin-left" v-if='detailUser.level==2'>
					中级技工
				</view>
				<view class="color margin-left" v-if='detailUser.level==3'>
					高级技工
				</view>
			</view>
			<view class="flex justify-start align-center margin-top">
				<view class="text-999">
					身份证号
				</view>
				<view class="margin-left">
					{{detailUser.userIdCard}}
				</view>
			</view>
			<view class="flex justify-start align-center margin-top">
				<view class="text-999">
					身份证、技工证
				</view>
			</view>
			<!-- 	<view class="flex justify-start flex-wrap">
				<view v-for="(item,index) in 3" class="radius5 margin-top-sm" :class="{'margin-left-sm':index%2!=0}"
					style="background-color: #F4F4F4;width: 324rpx;height: 204rpx;">

				</view>
			</view> -->
			<view class="flex justify-start flex-wrap">
				<image class="radius5 margin-top-sm" :src="mechanicPicBack"
					style="background-color: #F4F4F4;width: 324rpx;height: 204rpx;">

				</image>
				<image class=" margin-left-sm radius5 margin-top-sm" :src="mechanicPicFront"
					style="background-color: #F4F4F4;width: 324rpx;height: 204rpx;">

				</image>

			</view>
		</view>
		<view class="bg-white margin-sm padding-left-sm padding-top padding-right-sm padding-bottom">
			<view class="text-15 text-181818">
				服务信息
			</view>
			<view class="flex justify-between align-center margin-top">
				<view class="flex justify-center align-center flex-direction">
					<view class="text-20 text-bold text-221815">
						{{detailUser.credit ||0}}
					</view>
					<view class="text-11 text-999 margin-top-sm">
						信用分
					</view>
				</view>
				<view class="flex justify-center align-center flex-direction">
					<view class="text-20 text-bold text-221815">
						{{detailUser.orderServiceCount ||0}}
					</view>
					<view class="text-11 text-999 margin-top-sm">
						服务订单量
					</view>
				</view>
				<view class="flex justify-center align-center flex-direction">
					<view class="text-20 text-bold text-221815">
						{{detailUser.orderCommentCount ||0}}
					</view>
					<view class="text-11 text-999 margin-top-sm">
						评价订单量
					</view>
				</view>
				<view class="flex justify-center align-center flex-direction">
					<view class="text-20 text-bold text-221815">
						{{detailUser.explainCount || 0}}
					</view>
					<view class="text-11 text-999 margin-top-sm">
						投诉订单量
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white margin-sm padding">
			<view class="text-15 text-333 text-bold">
				个人简介
			</view>
			<view class="text-sm text-666 margin-top-sm">
				{{detailUser.description}}
			</view>
			<block v-if='type==1'>
				<view class="text-15 text-333 text-bold margin-top">
					提供服务
				</view>
				<view class="flex flex-wrap margin-top-sm">
					<block v-if='detailUser.mechanicTypeName'>
						<view class="bg-F4F4F4 round margin-left-xs text-df margin-top-sm color t-btn"
							v-for="item in detailUser.mechanicTypeName.split(',')">
							{{item}}
						</view>
					</block>

				</view>
			</block>


		</view>

		<view class="flex justify-center align-center margin-sm text-15">
			<button class="btn padding bg-color text-white" @click="verify">邀请</button>

		</view>

	</view>
</template>

<script>
	import {
		appConfig
	} from '@/common/js/config.js'
	export default {
		data() {
			return {
				userId: '',
				detailUser: {},
				type: '',
				mechanicPicBack: '',
				mechanicPicFront: ''
			};
		},

		onLoad(option) {
			console.log(option)
			if (option.item) {
				this.detailUser = JSON.parse(decodeURIComponent(option.item))
				console.log(this.detailUser)

			}
		
			if (option.type) {
				this.type = option.type
			}
			this.getDetail()
		},
		methods: {
			async getDetail(){
				const data = {id:this.detailUser.userId}
				const [err,rs]  = await this.$get(this.$api.jGdetail,data)
				if(rs){
					this.mechanicPicFront = rs.data.mechanicPicFront
					this.mechanicPicBack = rs.data.mechanicPicBack
					console.log(this.mechanicPicBack)
				}
			},

			verify() {

				const that = this
               
				uni.showModal({
					title: '提示',
					content:that.type==1?'你确定邀请该技工吗':'你确定邀请该配送工吗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							const data = {
								shopId: uni.getStorageSync("shopIdApply"),
								userId: that.detailUser.userId,
								workerType: 1
							}
							if (that.type == 2) {
								data['workerType'] = 2
							} else {
								data['workerType'] = 1
							}
							that.$get(that.$api.applyForWorker, data).then(res => {
								const [err, rs] = res
								if (rs) {
									that.$util.msg(rs.message)
									setTimeout(() => {
										uni.navigateBack({

										})
									}, 1000)
								}
							})


						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		margin-top: 92rpx;
		margin-bottom: 130rpx;
		width: 346rpx;
		height: 88rpx;
	}

	.t-btn {
		padding: 18rpx 28rpx;
	}
</style>
